<template>
    <div>
<!--  面包屑导航   -->
      <el-breadcrumb>
        <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--  卡片区域    -->
      <el-card>
        <div id="main" style="width: 800px;height:400px;"></div>
      </el-card>
    </div>
</template>

<script>
  import * as echarts from 'echarts'
  import _ from 'lodash'

    export default {
        name: "Report",
      data(){
          return{
            /*  API文档提供的options数据对象 */
            options:{
              title:{
                text:'用户来源'
              },
              tooltip:{
                trigger:'axis',
                axisPointer:{
                  type:'cross',
                  label:{
                    backgroundColor:'#E9EEF3'
                  }
                }
              },
              grid:{
                left:'3%',
                right:'4%',
                bottom:'3%',
                containLabel:true
              },
              xAxis:[
                {
                  boundaryGap:false
                }
              ],
              yAxis:[
                {
                  type:'value'
                }
              ]
            }
          }
      },
      /*  生命周期函数  页面上的元素被渲染完毕后调用  */
      async mounted() {
        let myChart = echarts.init(document.getElementById('main'));
        const res = await this.getList();
        const result = _.merge(res.data,this.options);
        myChart.setOption(result);
      },

      methods:{
        /*  获取服务器返回的折线图数据 */
        async getList(){
          const {data: res} = await this.$http.get('reports/type/1');
          if (res.meta.status !== 200){
            this.$message.error('获取折线图数据失败');
          }
          return res;
        }
      }
    }
</script>

<style scoped>

</style>
